<script>
import { ref } from 'vue'

export default {
	import {
		apiUrl
	} from '@/config/config.js';
  data() {
    return {
      form: {
        name: '', // 收货人
        mobile: '', // 联系方式
        province: '', // 省市区(前端展示)
        provinceCode: '', // 省份编码(后端参数)
        cityCode: '', // 城市编码(后端参数)
        areaCode: '', // 区/县编码(后端参数)
        detail: '', // 详细地址
        status: 0, // 默认地址，1为是，0为否
		userId: '',
		apiUrl: apiUrl,
      }
    }
  },
   methods: {
      saveAddress() {
        // 保存地址
		this.form.userId = uni.getStorageSync('account_key')
        uni.request({
        	url: this.apiUrl + '/api/userAddress/add',
        	data: this.form,
        	method: 'Post',
        	success: (res) => {
        		if (res.data.code == '200') {
        			uni.showModal({
        				content: '新增成功',
        			});
					uni.navigateBack({delta: 1})
        		} else {
        		   	uni.showModal({
        		   		content: '新增失败',
        		   	});
        		}
        	}
        })
      }
    }
}
</script>



<template>
	<view class="content">
		<form>
			<!-- 表单内容 -->
			<view class="form-item">
				<text class="label">联系人</text>
				<input class="input" placeholder="请填写联系人姓名" value="" v-model="form.name"/>
			</view>
			<view class="form-item">
				<text class="label">手机号码</text>
				<input class="input" placeholder="请填写联系人手机号码" value="" v-model="form.mobile" />
			</view>
			<view class="form-item">
				<text class="label">所在地区</text>
				<input class="input" placeholder="省/市/区(县)" value="" v-model="form.province"/>
			</view>
			<view class="form-item">
				<text class="label">详细地址</text>
				<input class="input" placeholder="街道、楼牌号等信息" value="" v-model="form.detail"/>
			</view>
			<view class="form-item">
				<label class="label">设为默认地址</label>
				<switch class="switch" color="#27ba9b" :checked="true" v-model="form.status"/>
			</view>
		</form>
	</view>
	<!-- 提交按钮 -->
	<button class="button" @click="saveAddress">保存并使用</button>
</template>

<style lang="scss">
	page {
		background-color: #f4f4f4;
	}

	.content {
		margin: 20rpx 20rpx 0;
		padding: 0 20rpx;
		border-radius: 10rpx;
		background-color: #fff;

		.form-item,
		.uni-forms-item {
			display: flex;
			align-items: center;
			min-height: 96rpx;
			padding: 25rpx 10rpx;
			background-color: #fff;
			font-size: 28rpx;
			border-bottom: 1rpx solid #ddd;
			position: relative;
			margin-bottom: 0;

			// 调整 uni-forms 样式
			.uni-forms-item__content {
				display: flex;
			}

			.uni-forms-item__error {
				margin-left: 200rpx;
			}

			&:last-child {
				border: none;
			}

			.label {
				width: 200rpx;
				color: #333;
			}

			.input {
				flex: 1;
				display: block;
				height: 46rpx;
			}

			.switch {
				position: absolute;
				right: -20rpx;
				transform: scale(0.8);
			}

			.picker {
				flex: 1;
			}

			.placeholder {
				color: #808080;
			}
		}
	}

	.button {
		height: 80rpx;
		margin: 30rpx 20rpx;
		color: #fff;
		border-radius: 80rpx;
		font-size: 30rpx;
		background-color: #27ba9b;
	}
</style>